@import '../variables.css';

.xwd-radio {
  // 基础样式
  font-size: 14px;
  line-height: 1.5;
  color: rgb(0 0 0 / 85%);

  // 反选颜色样式
  &-reverse {
    .ant-radio-checked {
      .ant-radio-inner {
        background-color: #fff;
        border-color: var(--xwd-primary);

        &::after {
          background-color: var(--xwd-primary);
        }
      }
    }
  }

  // Radio 按钮样式
  &-button {
    position: relative;
    display: inline-block;
    height: 32px;
    margin: 0;
    padding: 0 15px;
    color: rgb(0 0 0 / 85%);
    font-size: 14px;
    line-height: 30px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top-width: 1.02px;
    border-left: 0;
    cursor: pointer;
    transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;

    &:first-child {
      border-left: 1px solid #d9d9d9;
      border-radius: 2px 0 0 2px;
    }

    &:last-child {
      border-radius: 0 2px 2px 0;
    }

    &:hover {
      color: var(--xwd-primary);
    }

    &-checked {
      color: var(--xwd-primary);
      background: #fff;
      border-color: var(--xwd-primary);
      box-shadow: -1px 0 0 0 var(--xwd-primary);
      z-index: 1;
    }

    &-disabled {
      color: rgb(0 0 0 / 25%);
      background-color: #f5f5f5;
      border-color: #d9d9d9;
      cursor: not-allowed;
    }
  }
}
